<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>远坂凛消消乐</title>
<style>
  html,body{margin:0;background:#222;font-family:Helvetica;color:#fff;text-align:center}
  #header{background:#8b0000;padding:8px 0;font-size:22px;font-weight:bold;letter-spacing:2px}
  #timer{margin-left:10px;font-size:16px;color:#ffd700}
  #gameWrap{display:flex;justify-content:center;align-items:center;height:calc(100vh - 50px)}
  #gameCanvas{background:#fff;border-radius:8px}
  #msg{position:fixed;left:0;right:0;bottom:20px;font-size:18px;color:#ffd700;display:none}
</style>
</head>
<body>
<div id="header">
  远坂凛消消乐
  <span id="timer">00:00</span>
</div>

<div id="gameWrap">
  <canvas id="gameCanvas"></canvas>
</div>

<div id="msg">
  欢迎加入远坂凛b萌应援群：807870271<br>
  <img src="assets/qrcode.png" style="width:160px;margin-top:6px">
</div>

<script>
/* ---------- 参数（大格子 9×9） ---------- */
const SIZE = 90, COLS = 9, ROWS = 9;
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = COLS * SIZE;
canvas.height = ROWS * SIZE;

/* ---------- 计时器 ---------- */
const timerEl = document.getElementById('timer');
let seconds = 0;
const pad = n => n.toString().padStart(2,'0');
setInterval(() => {
  seconds++;
  timerEl.textContent = `${pad(Math.floor(seconds/60))}:${pad(seconds%60)}`;
}, 1000);

/* ---------- 资源 ---------- */
const imgs = [];
for(let i=1;i<=10;i++){
  const img=new Image(); img.src=`assets/${i}.jpg`;
  imgs.push(img);
}
const bg = new Image(); bg.src = 'assets/bg.jpg';

/* ---------- 随机地图 ---------- */
function genMap(){
  const arr = Array.from({length: COLS*ROWS/2}, (_,i)=>i%10).flatMap(v=>[v,v]);
  for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[arr[i],arr[j]]=[arr[j],arr[i]]}
  return Array.from({length: ROWS}, (_,r)=>arr.slice(r*COLS,(r+1)*COLS));
}
let map = genMap();
let revealed = Array.from({length: ROWS}, ()=>Array(COLS).fill(true));
let selected = null;

/* ---------- 绘制 ---------- */
function draw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.drawImage(bg,0,0,canvas.width,canvas.height);
  for(let y=0;y<ROWS;y++)
    for(let x=0;x<COLS;x++)
      if(revealed[y][x]) ctx.drawImage(imgs[map[y][x]], x*SIZE, y*SIZE, SIZE, SIZE);
}
function gravity(){
  for(let x=0;x<COLS;x++){
    const col = [];
    for(let y=ROWS-1;y>=0;y--) if(revealed[y][x]) col.push(map[y][x]);
    for(let y=ROWS-1;y>=0;y--){
      if(ROWS-1-y<col.length){ map[y][x]=col[ROWS-1-y]; revealed[y][x]=true;}
      else revealed[y][x]=false;
    }
  }
}
function canPlay(){
  const cnt = new Array(10).fill(0);
  for(let y=0;y<ROWS;y++) for(let x=0;x<COLS;x++) if(revealed[y][x]) cnt[map[y][x]]++;
  return cnt.some(v=>v>=2);
}
function showEnd(){ document.getElementById('msg').style.display='block'; }

/* ---------- 事件 ---------- */
canvas.addEventListener('click', e=>{
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((e.clientX-rect.left)/SIZE);
  const y = Math.floor((e.clientY-rect.top)/SIZE);
  if(!revealed[y] || !revealed[y][x]) return;
  if(selected){
    const [sx,sy]=selected;
    if(map[sy][sx]===map[y][x] && (sx!==x || sy!==y)){
      revealed[sy][sx]=revealed[y][x]=false;
      gravity();
      if(!canPlay()) showEnd();
    }
    selected=null;
  }else selected=[x,y];
  draw();
});

/* ---------- 启动 ---------- */
Promise.all([...imgs,bg].map(i=>new Promise(r=>{i.onload=r;i.onerror=r;}))).then(draw);
</script>
</body>
</html>